<template>
  <div class="warp containerT">
  	<!-- 头部 -->
    <div class="header">
      <div class="return-icon" @click="back();"></div>
      <router-link :to="{path:'/search'}" class="search-input">
        <input type="text" placeholder="搜小说">
      </router-link>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>


    <div class="book-list" 
        v-infinite-scroll="loadBottom"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
      <router-link :to="{path:'/bookdetails/'+item.id}" class="layout1-box book-item" v-for="(item,index) in list">
        <img :src="item.cover ? item.cover : errorBookDefaultImg" class="item-l" :onerror="errorBookDefaultImg">
        <div class="item-r">
            <h3 class="item-tt">{{item.title}}</h3>
            <p class="item-desc">{{item.author}}</p>
            <p class="item-desc">最新：第251章</p>
            <p class="item-info">
              <span class="label">
                <i class="green">{{item.is_finish == '1' ? '已完结' :'未完结'}}</i>
                <i class="blue">男频</i>
              </span>
            </p>

            <span class="join" @click.prevent="joinBookshelf(item.id,index)">{{item.is_collect ? '移除书架' : '加入书架'}}</span>
        </div>
      </router-link>
    </div>
    <div class="loadmore-down">
        <span>{{loadNoData ?'暂无更多数据了!' : '加载中...'}}</span>
    </div>
  </div>
</template>
<script>
    import bookDefaultImg from '@/assets/images/book.png';
    export default {
    	name: 'home',
    	components: {

	    },
    	data () {
      		return {
            list:[],
            page:0,
            loading:false,
            loadNoData:false,
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
	      	}
	    },
      created(){

      },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          joinBookshelf(id,index){
            if(this.list[index].is_collect){
              this.$axios.post(
                this.$store.state.url+"cancel_novel?device_sn="+this.$store.state.device,
                {device_sn:this.$store.state.device,id:id}).then(res=>{
                  console.log(res.data);
                  if(res.data.code == 0){
                    this.$toast({
                      message: '移除成功',
                      duration: 1500
                    });
                    this.list[index].is_collect = 0;
                    this.list = this.list;
                  }else{
                    this.$toast({
                      message: res.data.message,
                      duration: 1500
                    });
                  }
              });
            }else{
              this.$axios.post(
                this.$store.state.url+"collect_novel?device_sn="+this.$store.state.device,
                {device_sn:this.$store.state.device,id:id}).then(res=>{
                  console.log(res.data);
                  if(res.data.code == 0){
                    this.$toast({
                      message: '加入成功',
                      duration: 1500
                    });
                    this.list[index].is_collect = 1;
                    this.list = this.list;
                  }else{
                    this.$toast({
                      message: res.data.message,
                      duration: 1500
                    });
                  }
              });
            }
          },
          loadBottom(){
            this.loading = true;
            this.$axios.post(
              this.$store.state.url+"novel_list?device_sn="+this.$store.state.device,
              {device_sn:this.$store.state.device,offset:this.list.length,limit:5,keyword:this.$store.state.searchVal}).then(res=>{
                
                this.list = this.list.concat(res.data.list);
                if(res.data.list.length >= 5){
                  console.log(res.data);
                  this.loading = false;
                  ++this.page;
                }else{
                  this.loadNoData = true;
                }
            });
          }
	    }
  	}
</script>
<style lang="scss" scoped>
	.search{
      width:85%;
      font-size:24px;
      position: relative;
      background-color:#f5f5f5;
      border-radius:60px;
      padding-left:50px;
      &.search-icon:after{
        left:25px;
      }
      input{
        height:60px;
        padding:0 25px;
        line-height:60px;
      }
    }
    .book-list{
      padding:40px 30px;
      .book-item{
        margin-bottom:60px;
        .item-r {
          padding-right:160px;
          .item-desc:nth-child(2){
            color:#656565;
          }
          .item-desc:nth-child(3){
            color:#999999;
          }
          
          .item-desc{
            margin-bottom:10px;
          }
          .join{
            position: absolute;
            top:50%;
            right:0;
            width:150px;
            text-align: center;
            line-height:50px;
            margin-top:-25px;
            border-radius:5px;
            background: #3471ff;
            color:#fff;
            font-size:28px;
          }
        }
      }
    }
</style>
